<template>
    <div class="colorPickContainer">
        <span class="title">{{colorTypeName}}</span>
        <el-color-picker class="picker" v-model="colorObj" size="medium" ::change="solveColor()"></el-color-picker>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        name: "colorPickerCmp",
        props: ["color", "colorType", "callBackName"],

        data () {
            return {

                colorObj: `rgb(${this.$props.color.r*255},${this.$props.color.g*255},${this.$props.color.b*255})`,

                colorTypeName: this.$props.colorType || "颜色",

                callBack: this.$props.callBackName,
            }
        },

        mounted() {

            const _this = this;

            $(() => {
                _this.resetColorPicker();
            });
        },

        watch: {
            color: {
                handler (color) {
                    this.colorObj = `rgb(${color.r*255},${color.g*255},${color.b*255})`;
                    this.callBack = this.$props.callBackName;
                }
            }
        },

        methods: {
            resetColorPicker () {
                $(".el-color-picker__trigger").css({
                    height: "25px",
                    width: "172px",
                    border: "none",
                    borderRadius: "5px",
                    borderColor: "rgba(105, 108, 145, 1)",
                    top: "5px",
                    lineHeight: "25px"
                });

                $(".el-color-picker__color").css({
                    borderColor: "rgba(105, 108, 145, 1)",
                    height: "18px",
                });

                $(".picker").css("visibility", "visible");
            },

            solveColor () {
                
                if (typeof this.colorObj === 'string' && this.colorObj.indexOf("rgb") < 0) {

                    this.$props.color.setHex(parseInt(this.colorObj.substr(1), 16));

                    if (this.callBack) {
                        this.$root.$emit(this.callBack, this.$props.color);
                    }
                }

                return null;
            }
        }
    }
</script>

<style scoped>

    .colorPickContainer {
        position: relative;
        height: 36px;
    }

    .picker{
        margin-left: 44px;
        vertical-align: middle;
        visibility: hidden;
        position: absolute;
        left: 55px;
        bottom: 5px;
    }

    .title {
        padding-left: 32px;
        font-size: 12px;
        font-weight: 100;
        vertical-align: sub;
    }
</style>